<template>
	<view>
		<u-navbar title="商品详情" :leftIconColor="titleStyle.color" :titleStyle="titleStyle " :autoBack="true"
			:safeAreaInsetTop="true" :fixed="true" :placeholder="true" :bgColor="isNavbar?'rgba(0, 0, 0, 0)':'#FF5B00'"></u-navbar>
		<view class="swiper">
			<u-swiper :list="productInfo.indexImg" height="440rpx" radius="0"></u-swiper>
		</view>
		<view style="height: 400rpx;"></view>
		<view class="card relative  u-m-l-32 u-m-r-32 u-p-t-20" style="height: 412rpx;" v-if="productInfo.type==0">
			<view class="flex align-center justify-between u-p-l-20 u-p-r-20">
				<view class="flex align-center">
			 
					<!-- 普通价格 -->
					<view   style="color: #FD002B;">
						<text class="text-bold  u-font-xs">￥</text>
						<text class="text-bold price">{{parseFloat(produnctInfoSku.salePrice).toFixed(2)}}</text>
					</view>
					<view  
						class="u-m-l-32 u-font-24 text999 u-p-l-20 u-p-r-20 text-decoration: line-through;">
						原价￥{{parseFloat(produnctInfoSku.price).toFixed(2)}}</view>
				</view>

				<view style="color: #999;font-size: 24rpx;">已购:{{productInfo.outCount||0}}</view>
			</view>
			<view class="u-font-32 text-bold u-font-24 u-p-l-20 u-p-r-20">
				{{productInfo.title}}
			</view>
			<view class="u-m-t-28 flex align-center justify-between u-p-l-20 u-p-r-20">
				<view class="flex align-center">
					<view class="u-m-r-16">选择</view>
					<view class="sku u-m-r-32" v-for="(sku,i) in produnctInfoSkuList" :key="i" :class="i==0?'cur':''"
						@click="handleChangeSku(i)">{{sku.unit}}</view>

				</view>
				<u-icon name="arrow-right" size="14"></u-icon>
			</view>
			<view class="tag flex align-center justify-between u-m-t-40 u-p-r-20">
				<view>
					<view class="text">快至1小时上门</view>
					<view class="text u-m-t-10">免费取送</view>
				</view>
				<view>
					<view class="text-black u-font-24">{{productInfo.xihuScope}}</view>
					<view class="text999 u-font-24 u-m-t-10">可洗范围</view>
				</view>
				<view>
					<view class="text-black u-font-24">{{productInfo.xihuTimes}}</view>
					<view class="text999 u-font-24 u-m-t-10">洗护时效</view>
				</view>
				<view>
					<view class="text-black u-font-24">{{productInfo.xihuTechnology}}</view>
					<view class="text999 u-font-24 u-m-t-10">清洗工序</view>
				</view>
			</view>
		</view>
		<view class="card relative  u-m-l-32 u-m-r-32 u-p-t-20" style="height: 270rpx;" v-else>
			<view class="flex align-center u-p-l-20 u-p-r-20">
				<view style="color: #FD002B;">
					<text class="text-bold  u-font-xs">￥</text>
					<text class="text-bold price">{{parseFloat(produnctInfoSku.salePrice).toFixed(2)}}</text>
					<!-- <text class="u-font-xs  text-bold">.99</text> -->
				</view>
				<view class="u-m-l-32 u-font-24 text999 u-p-l-20 u-p-r-20 text-decoration: line-through;">
					原价￥{{parseFloat(produnctInfoSku.price).toFixed(2)}}</view>
			</view>
			<view class="u-font-32 text-bold u-font-24 u-p-l-20 u-p-r-20">
				{{productInfo.title}}
			</view>
			<view class="u-m-t-28 flex align-center justify-between u-p-l-20 u-p-r-20">
				<view class="flex align-center">
					<view class="u-m-r-16">选择</view>
					<view class="sku u-m-r-32" v-for="(sku,i) in produnctInfoSkuList" :key="i" :class="i==0?'cur':''"
						@click="handleChangeSku(i)">{{sku.unit}}</view>

				</view>
				<u-icon name="arrow-right" size="14"></u-icon>
			</view>

		</view>

		<!-- <view class="u-m-l-32 u-m-r-32 u-m-t-20 card u-p-20">
			<view class="text-bold text-black">搭配洗</view>
			<view class="flex align-center scroll">
				<view v-for="(item,k) in 2" :key="k" class="u-p-10 u-m-t-24 goods flex align-center u-m-r-20">
					<view>
						<u-image :showLoading="true" mode="aspectFill" radius="8rpx"
							src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fe7742614-22bf-4ac6-813b-526c83f8d1cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688310265&t=0251e88becd1e3b7291320c2e18a8d9d"
							width="124rpx" height="124rpx">
							<view slot="loading">
								<u-loading-icon></u-loading-icon>
							</view>
						</u-image>
					</view>
					<view class="u-m-l-16" style="width: 100%;">
						<view class="ellipsis u-font-24 text-black" style="width: 324rpx;">衣鞋套餐 羽绒服/棉衣/毛衣...</view>
						<view class="u-m-t-16 u-font-24" style="color: #FD002B;">搭配价59元</view>
					</view>
				</view>
			</view>
		</view> -->



		<view class="text-center u-p-t-50 u-p-b-20 text999">{{productInfo.type==0?'服务详情':"商品详情"}}</view>

		<!-- <u-parse :content="productInfo.detailsInfo" class="text-center"></u-parse> -->
		<u--image :src="item" mode="widthFix" v-for="(item,k) in productInfo.detailsInfoImage" :key="k" width="auto"
			height="auto" :showLoading="true"></u--image>


		<!-- <view class="u-m-l-32 u-m-r-32 u-m-t-20 card u-p-20">
			<view class="flex align-center justify-between">
				<view class="text-black">评价</view>
				<u-icon name="arrow-right" size="14" color="#333"></u-icon>
			</view>

			<view class="u-p-t-40 u-p-b-40 solid-bottom">
				<view class="flex align-center justify-between">
					<view class="flex align-center">
						<u-avatar src="src"></u-avatar>
						<view class="u-m-l-16">
							<view style="color: #181919;">用户名称</view>
							<view class="u-font-24 u-m-t-10 text999">2023.05.14</view>
						</view>
					</view>
					<view class="u-font-24" style="color: #FF8143;">10分</view>
				</view>
				<view class="flex align-center u-m-t-24">
					<view class="tagsm">超级满意</view>
					<view class="tagsm">洗的很快</view>
				</view>
				<view class="u-m-t-20 text-black">此用户没有填写文本</view>
				<view class="u-m-t-12 text999">衣物清洗1件</view>
			</view>

			<view class="u-p-t-40">
				<view class="flex align-center justify-between">
					<view class="flex align-center">
						<u-avatar src="src"></u-avatar>
						<view class="u-m-l-16">
							<view style="color: #181919;">用户名称</view>
							<view class="u-font-24 u-m-t-10 text999">2023.05.14</view>
						</view>
					</view>
					<view class="u-font-24" style="color: #FF8143;">10分</view>
				</view>
				<view class="flex align-center u-m-t-24">
					<view class="tagsm">超级满意</view>
					<view class="tagsm">洗的很快</view>
				</view>
				<view class="u-m-t-20 text-black">此用户没有填写文本</view>
				<view class="u-m-t-12 text999">衣物清洗1件</view>
			</view>
		</view> -->
		<view style="margin-top:120rpx"></view>
		<view class="flex align-center u-row-between u-p-l-32 u-p-r-32 footer">

			<view style="position: relative;" class="flex align-center flex-direction justify-center"
				@click="handleToCart()">
				<!-- <u-badge :absolute="true" :offset="[-5,5]" max="99" bgColor="#FD002B" :value="1"></u-badge> -->
				<u-icon name="/static/index/cart.png" size="44rpx"></u-icon>
				<view class="u-m-t-10" style="color: #282828;">购物车</view>
			</view>
			<view class="flex align-center flex-direction justify-center">
				<!-- <u-icon name="/static/index/cart.png" size="44rpx"></u-icon> -->
				<!-- <view class="u-m-t-10" style="color: #282828;">&nbsp;</view> -->
			</view>
			<view   class="btn-plain"
				@click="popupshow=true;shiToCart=true;shiToBuy=false">加入购物车</view>
			<view  @click="popupshow=true;shiToCart=false;shiToBuy=true" class="btn-fill">
				立即下单</view>
			 
		</view>


		<!-- SKU -->
		<u-popup :show="popupshow" round="20rpx" :closeable="true" @close="popupshow=false">
			<view class="popup u-p-32">
				<view class="flex u-col-center u-m-b-30">
					<u-image width="160rpx" height="160rpx" :src="produnctInfoSku.skuImg"></u-image>
					<view style="margin-left: 10rpx;">
						<view class="text">
							<text>￥</text>
							<text class="u-font-40">{{parseFloat(produnctInfoSku.salePrice).toFixed(2)}}</text>
						</view>
						<view class="u-m-t-20" style="color: #999;"> 原价：{{parseFloat(produnctInfoSku.price).toFixed(2)}}
						</view>
					</view>
				</view>

				<view>请选择商品规格</view>
				<view class="flex u-flex-wrap u-m-t-20">
					<block v-for="(sku,k) in produnctInfoSkuList" :key="k">
						<view @click="selectSku(sku,k)" :class="k==skuCur?'active':''" class="btn">{{sku.unit}}</view>
					</block>
				</view>

				<view class="flex u-col-center u-row-between">
					<view>
						<text class="text-bold">数量</text>
						<!-- <text class="u-font-26 u-m-l-20" style="color: #999;">每人限购5件</text> -->
					</view>
					<u-number-box v-model="number"></u-number-box>
				</view>
				<view class="flex u-col-center u-m-t-40 u-m-b-10">
					<view class="btn-sm left" @click="handleAddProductToShoppingCar()" v-if="shiToCart">加入购物车</view>
					<view class="btn-sm right" @click="handleToSubmitOrder()" v-if="shiToBuy">立即购买</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		getProductInfoDetails,
		addProductToShoppingCar,
		addProductToShoppingCarXiaDan
		// addCart
	} from '@/common/api/api.js'
	export default {
		data() {
			return {
				isTimeout: false, //是否超时true在时间段false未在时间段
				number: 1,
				skuCur: 0,
				popupshow: false,
				titleStyle: {
					color: '#fff'
				},
				isNavbar: false,
				content: '',
				productInfo: {},
				produnctInfoSkuList: [],
				produnctInfoSku: [],
				shiToBuy: false,
				shiToCart: false,
				isMall: '0'

			}
		},
		onLoad(options) {
			// this.computeTime();
			this.handleGetProductInfoDetails(options.id);
			this.isMall = options.isMall;
		},
		methods: {
			openPopup() {
				if (!this.isTimeout && this.productInfo.isMiaosha == 1) {
					uni.$u.toast("未在秒杀时间段内");
					return;
				}
				this.popupshow = true;
				this.shiToBuy = true;
				this.shiToCart = false
			},
			selectSku(sku, k) {
				this.skuCur = k;
				this.produnctInfoSku = sku;
			},
			//判断秒杀时间
			computeTime(row) {
				if (row.isMiaosha == 0) {
					return;
				}
				let curTime = new Date().getTime();
				let startTime = new Date(row.beginMiaoshaTime).getTime();
				let endTime = new Date(row.endMiaoshaTime).getTime();

				if (curTime > startTime && curTime < endTime) {
					this.isTimeout = true;
				} else {
					this.isTimeout = false;
				}
			},
			// 获取产品详情
			handleGetProductInfoDetails(id) {
				getProductInfoDetails({
					id: id
				}).then(res => {
					this.productInfo = res.data;
					this.productInfo.indexImg = JSON.parse(this.productInfo.indexImg);
					this.produnctInfoSkuList = this.productInfo.productSkuList;
					this.produnctInfoSku = this.produnctInfoSkuList[0];
					this.productInfo.detailsInfoImage = JSON.parse(this.productInfo.detailsInfo);
					this.computeTime(this.productInfo);
				})
			},
			// 选择规格
			handleChangeSku(i) {
				this.produnctInfoSku = this.produnctInfoSkuList[i];
			},
			// 添加到购物车
			handleAddProductToShoppingCar() {
				this.popupshow = false;
				this.shiToCart = false;
				var params = {
					productId: this.productInfo.id,
					price: this.produnctInfoSku.price,
					productName: this.productInfo.title,
					salePrice: this.produnctInfoSku.salePrice,
					productSkuId: this.produnctInfoSku.id,
					unit: this.produnctInfoSku.unit,
					upc: this.produnctInfoSku.upc,
					userInfoId: this.$store.state.$token,
					image: this.produnctInfoSku.skuImg,
					type: this.productInfo.type,
					companyId: this.productInfo.companyId,
					productFuName: this.productInfo.fuTitle,
					brand: this.productInfo.brand,
					count: this.number,
					status: 0,
				}
				addProductToShoppingCar(params).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '添加成功！',
							type: 'success',
							duration: 2000
						});
					}
				})
			},
			// 购物车
			handleToCart() {
				if (this.isMall == '0') {
					uni.reLaunch({
						url: '/pages/cart/cart'
					})
				}

				if (this.isMall == '1') {
					this.$u.route('/pages/cart/mallCart?companyId=' + this.productInfo.companyId);
				}

			},
			// 立即下单
			handleToSubmitOrder() {
				this.popupshow = false;
				this.shiToBuy = false;
				this.shiToCart = false;
				var params = {
					productId: this.productInfo.id,
					price: this.produnctInfoSku.price,
					productName: this.productInfo.title,
					salePrice: this.produnctInfoSku.salePrice,
					productSkuId: this.produnctInfoSku.id,
					unit: this.produnctInfoSku.unit,
					upc: this.produnctInfoSku.upc,
					userInfoId: this.$store.state.$token,
					image: this.produnctInfoSku.skuImg,
					type: this.productInfo.type,
					count: this.number,
					companyId: this.productInfo.companyId
				}
				addProductToShoppingCarXiaDan(params).then(res => {
					if (res.code == 200) {
						let idsArr = [];
						idsArr.push(res.data);
						this.$u.route('/pages/index/order/order?idsArr=' + idsArr);
					}
				})

			}
		},
		// onPageScroll(e) {
		// 	if (e.scrollTop > 20) {
		// 		this.isNavbar = false;
		// 		this.titleStyle.color = '#000';
		// 	} else {
		// 		this.isNavbar = true;
		// 		this.titleStyle.color = '#fff';
		// 	}
		// }
	}
</script>

<style lang="scss">
	.swiper {
		position: absolute;
		// top: 128rpx;
		left: 0;
		right: 0;
	}

	.card {
		background: #FFFFFF;
		border-radius: 8rpx;
	}

	.relative {
		position: relative;
		z-index: 1;
	}

	.price {
		font-size: 42rpx;
	}

	.sku {
		width: auto;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 4rpx;
		opacity: 1;
		border: 2rpx solid #CCCCCC;
		text-align: center;
		color: #333333;
		padding: 0 10rpx;
	}

	.cur {
		background: #ECFFFE;
		color: #FF5B00;
		border: 2rpx solid #FF5B00;
	}

	.tag {
		width: auto;
		height: 116rpx;
		background: linear-gradient(90deg, #FAF3EC 0%, #FFFFFF 100%);
		border-radius: 0px 0px 8rpx 8rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
		// line-height: 58rpx;

		.text {
			font-size: 24rpx;
			color: #693510;
		}
	}

	.scroll {
		overflow: scroll;

		.goods {
			width: 494rpx;
			height: 144rpx;
			border-radius: 8rpx;
			border: 2rpx solid #EEEEEE;
		}
	}

	.tagsm {
		width: 126rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background: #F3F3F3;
		border-radius: 24rpx;
		font-size: 24rpx;
		color: #666666;
		margin-right: 16rpx;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 0;
		background-color: #ffffff;

		.btn-plain {
			width: 190rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			border-radius: 8rpx;
			border: 2rpx solid #FF5B00;
			font-size: 26rpx;
			color: #FF5B00;
			margin-left: 136rpx;
		}

		.btn-fill {
			width: 190rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			background: #FF5B00;
			border-radius: 8rpx;
			color: #ffffff;
			margin-left: 20rpx;
		}
	}


	.popup {
		min-height: 500rpx;

		.text {
			color: #ff5500;
		}

		.btn {
			min-width: 110rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #f1f1f1;
			border-radius: 10rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			padding-left: 8rpx;
			padding-right: 8rpx;
		}

		.active {
			color: #FF5B00;
			border: 1px solid #FF5B00;
		}

		.btn-sm {
			border: 1px solid red;
			width: 100%;
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
		}

		.left {
			border-radius: 90rpx;
			background-color: #FF5B00;
			color: #ffffff;
			border: 1px solid #FF5B00;
		}

		.right {
			border-radius: 90rpx;
			background-color: #FF5B00;
			color: #ffffff;
			border: 1px solid #FF5B00;
		}
	}

	.disable {
		border-radius: 90rpx;
		background-color: #e3e3e3 !important;
		color: #666 !important;
		border: 1px solid #e3e3e3 !important;
	}
</style>